<template>
    <div class="containers">
      <div class="canvas" ref="canvas" style="height: 100%"></div>
      <div class="action">
        <el-tooltip effect="light" content="下载Svg" placement="top">
          <el-button icon="el-icon-picture" @click="downloadSvg"></el-button>
        </el-tooltip>
      </div>
      <a hidden ref="downloadLink"></a>
    </div>
  </template>
<script>
// 引入自定义 Viewer
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlGoal } from "@/api/goal/goal";

export default {
  name: "BpmnViewer",
  props:{
    bpmnOpen:Boolean
  },
  data() {
    return {
      bpmnViewer: null,
      xmlStr: null,
    };
  },
  watch: {
    bpmnOpen: {
      deep: true,
      immediate: true,
      handler(val) {
        this.createNewDiagram()
      }
    }
  },
  mounted() {
    this.bpmnViewer = new BpmnModeler({
        container: this.$refs.canvas
    })
    
  },
  methods: {
    async createNewDiagram() {
      try {
        await xmlGoal().then(res => {
           this.xmlStr = res
        })
      	 // 本地 .bpmn 文件地址
        const result = await this.bpmnViewer.importXML(this.xmlStr)
        const { warnings } = result;
      } catch (err) {
        console.log(err.message, err.warnings);
      }
    },
    async downloadSvg() {
      try {
        // 获取文件名
        const name = `目标中枢流程图.svg`;
        // 从建模器画布中提取svg图形标签
        let context = "";
        const djsGroupAll = this.$refs.canvas.querySelectorAll(".djs-group");
        for (let item of djsGroupAll) {
          context += item.innerHTML;
        }
        // 获取svg的基本数据，长宽高
        const viewport = this.$refs.canvas.querySelector(".viewport").getBBox();
        console.log(djsGroupAll,viewport)
        // 将标签和数据拼接成一个完整正常的svg图形
        const svg = `
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="${viewport.width}"
            height="${viewport.height}"
            viewBox="${viewport.x} ${viewport.y} ${viewport.width} ${viewport.height}"
            version="1.1"
            >
            ${context}
          </svg>
        `;
        // 将文件名以及数据交给下载方法
        this.download2({ name: name, data: svg });
      } catch (error) {
        this.toast.error('下载Svg失败，请重试')
      }
    },
    download2({ name = "diagram.bpmn", data }) {
      // 这里就获取到了之前设置的隐藏链接
      const downloadLink = this.$refs.downloadLink;
      // 把输就转换为URI，下载要用到的
      const encodedData = encodeURIComponent(data);
      if (data) {
        // 将数据给到链接
        downloadLink.href =
          "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
        // 设置文件名
        downloadLink.download = name;
        // 触发点击事件开始下载
        downloadLink.click();
      }
    },
  }
};
</script>

<style scoped>
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
.containers{
    height: 70vh;
    position: relative;
}

.action {
  position: absolute;
  bottom: 0;
}
/deep/.djs-palette,/deep/.djs-context-pad {
    display: none;
}


</style>